<!DOCTYPE html>
<html class="h-full bg-white">
  <head>
    <title>Maybe</title>
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="Maybe">

    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_importmap_tags %>

    <%= hotwire_livereload_tags if Rails.env.development? %>
  </head>

  <body class="h-full">
    <div class="flex flex-col justify-center min-h-full px-6 py-12">

      <div class="sm:mx-auto sm:w-full sm:max-w-md">
        <%= render "shared/logo" %>

        <h2 class="mt-6 text-3xl font-semibold tracking-tight text-center font-display">
          <%= content_for?(:header_title) ? yield(:header_title).html_safe : t('.your_account') %>
        </h2>

        <% if controller_name == "sessions" %>
        <p class="mt-2 text-sm text-center text-gray-600">
          <%= t('.or') %> <%= link_to t('.sign_up'), new_registration_path, class: 'font-medium text-gray-600 hover:text-gray-400 transition' %>
        </p>
        <% elsif controller_name == "registrations" %>
        <p class="mt-2 text-sm text-center text-gray-600">
          <%= t('.or') %> <%= link_to t('.sign_in'), new_session_path, class: 'font-medium text-gray-600 hover:text-gray-400 transition' %>
        </p>
        <% end %>

      </div>

      <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-lg">
        <%= yield %>
      </div>

      <div class="p-8 mt-2 text-center">
        <p class="mt-6 text-sm text-black"><%= link_to t('.privacy_policy'), "/privacy", class: "font-medium text-gray-600 hover:text-gray-400 transition" %> &bull; <%= link_to t('.terms_of_service'), "/terms", class: "font-medium text-gray-600 hover:text-gray-400 transition" %></p>
      </div>

    </div>
  </body>
</html>
